<template>
    <div>
        <div style="width: 100%;" @click="handClick">
            <slot></slot>
        </div>
        <a-modal v-model="visible" :footer="null" :closable="false" width="50vw" wrapClassName="modalWraps">
            <div class="work-detail-dialog__wrapper">
                <div class="work-detail-dialog">
                    <div class="work-detail-dialog-content">
                        <!-- 详情title -->
                        <div class="dialog-title">
                            <span>{{ detail.titleName }}</span>
                            <span class="icon-close" @click="close"></span>
                        </div>
                        <div class="dialog-subtitle">
                            <span>山东省港口集团有限公司</span>
                            <span class="margin-left">审批编号：{{ detail.businessId }}</span>
                        </div>
                        <a-spin :spinning="loading">
                            <!-- 详情body -->
                            <div class="dialog-body">
                                <a-row :gutter="40">
                                    <a-col v-for="item in detail.componentValueDataEntityList" :key="item.id" :span="['DDPhotoField', 'SignatureField', 'TableField', 'TextNote'].includes(
                                        item.componentType
                                    )
                                        ? 24
                                        : 12
                                        ">
                                        <div class="detail-prop">
                                            <div v-if="item.componentType !== 'TextNote'">
                                                <div class="detail-prop-title">
                                                    <a-tooltip :title="item.name">
                                                        <span class="one">{{ item.name }}</span>
                                                    </a-tooltip>
                                                </div>
                                                <!-- 图片类型 -->
                                                <div v-if="item.componentType == 'DDPhotoField'"
                                                    class="detail-prop-pics scrollX" v-viewer.static="{ title: false }">
                                                    <img v-for="img in item.value" :key="img"
                                                        class="detail-prop-pics__item" style="object-fit: cover"
                                                        :src="img" />
                                                    <div class="empty-box" v-if="item.value.length <= 0">暂无图片</div>
                                                </div>
                                                <!-- 签名 -->
                                                <div v-else-if="item.componentType == 'SignatureField'"
                                                    class="detail-prop-pics scrollX"
                                                    >
                                                    <!-- 
                                                    v-viewer.static="{ title: false, className: 'bg-light' }" -->
                                                    <!-- <img class="detail-prop-pics__item signature"
                                                        style="object-fit: cover" :src="item.value" /> -->
                                                    <div class="detail-prop-pics__item">
                                                        <ShowBase :value="item.value"></ShowBase>
                                                    </div>
                                                    <div class="empty-box" v-if="!item.value">暂无图片</div>
                                                </div>
                                                <!-- 列表 -->
                                                <a-row v-else-if="item.componentType == 'TableField'">
                                                    <a-col v-for="list in item.value" :key="list.rowNumber">
                                                        <div v-for="row in list.rowValue" :key="row.key"
                                                            class="detail-prop-value detail-prop-sub">
                                                            <div class="detail-prop-sub__label">{{ row.label }}</div>
                                                            <div class="detail-prop-sub__value">
                                                                <div v-if="/DDPhotoField/.test(row.key)"
                                                                    class="detail-prop-pics scrollX"
                                                                    v-viewer.static="{ title: false }">
                                                                    <img v-for="img in row.value" :key="img"
                                                                        class="detail-prop-pics__item"
                                                                        style="object-fit: cover" :src="img" />
                                                                </div>
                                                                <span v-else>{{ row.value }}</span>
                                                            </div>
                                                        </div>
                                                    </a-col>
                                                </a-row>
                                                <div v-else class="detail-prop-value">
                                                    {{ item.value }}
                                                </div>
                                            </div>
                                            <div v-else class="detail-prop-textnode">{{ item.value }}</div>
                                        </div>
                                    </a-col>
                                </a-row>
                                <!-- 审批 -->
                                <div class="approval-flow-wrapper" v-if="
                                    detail.operationRecordDataEntityList && detail.operationRecordDataEntityList.length
                                ">
                                    <ApprovalFlow :data="detail.operationRecordDataEntityList"></ApprovalFlow>
                                </div>
                            </div>
                        </a-spin>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import ApprovalFlow from '@/components/Process/ApprovalFlow.vue';
import * as dayjs from 'dayjs';
import ShowBase from '@/components/ShowBase/ShowBase';
export default {
    components: { ApprovalFlow, ShowBase },
    props: {
        id: {
            type: [Number, String],
            default: '',
        }
    },
    data() {
        return {
            visible: false,
            height: 821,
            detail: {},
            loading: false,
        };
    },
    created() { },
    methods: {
        fetchDetail(id) {
            // try {
            this.visible = true;
            this.loading = true;
            this.getAxios(this.$queryFormDataInfo, { id: id }).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    let { ccUserNames, imgUrls, componentValueDataEntityList, operationRecordDataEntityList } =
                        data;
                    ccUserNames = JSON.parse(ccUserNames || '[]');
                    imgUrls = imgUrls || [];
                    this.detail = {
                        ...data,
                        imgUrls,
                        ccUserNames,
                        componentValueDataEntityList: componentValueDataEntityList
                            .map(item => {
                                if (item.componentType === 'DDDateRangeField') {
                                    item.name = JSON.parse(item.name).join('，');
                                    item.value = JSON.parse(item.value).slice(0, 2).join('，');
                                }
                                if (item.componentType === 'DDMultiSelectField') {
                                    item.value = JSON.parse(item.value).join('，');
                                }
                                if (item.componentType === 'DDPhotoField' || item.componentType == 'TableField') {
                                    item.value = JSON.parse(item.value);
                                }
                                if (item.componentType === 'TimeAndLocationField') {
                                    item.name = JSON.parse(item.name).join('，');
                                    const value = JSON.parse(item.value);
                                    item.value = `${value[0]}，${value[3]}`;
                                }

                                return item;
                            }),
                        operationRecordDataEntityList: operationRecordDataEntityList.map(item => {
                            if (item.type == 'PROCESS_CC' && item.ccUserNames) {
                                item.ccUserNames = JSON.parse(item.ccUserNames);
                            }
                            item.date = dayjs(item.date).format('MM-DD HH:mm');
                            return item;
                        }),
                    };
                }
            }).catch(() => {
                this.visible = false;
            }).finally(() => {
                this.loading = false;
            })
        },
        close() {
            this.visible = false;
            this.loading = false;
            setTimeout(() => {
                this.$nextTick(() => {
                    this.detail = {};
                })
            }, 500)
        },
        handClick() {
            if (this.id != '' && this.loading != true) {
                this.fetchDetail(this.id);
            }
        },
    },
    mounted() {
    }
};
</script>

<style lang="less" scoped>
.work-detail-dialog__wrapper {
    // position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: rgba(0, 0, 0, 0.5);
    // z-index: 1000;

    .work-detail-dialog {
        position: relative;
        // width: 1342px;
        // min-width: ;
        // width: 60vw;
        // margin: 15vh auto 50px;
        // margin: calc((100vh - 821px)/2) auto;
        width: 100%;

        .work-detail-dialog-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            backdrop-filter: blur(6px);
        }
    }

    .work-detail-dialog-content {
        // padding: 24px;

        .dialog-title {
            display: flex;
            justify-content: space-between;
            font-size: 22px;
            font-weight: 1000;
            color: #fff;
            line-height: 1.5;

            .icon-close {
                display: inline-block;
                width: 46px;
                height: 46px;
                background: url(~@/assets/svg/icon-close.svg) center / contain no-repeat;
                cursor: pointer;
            }
        }

        .dialog-subtitle {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.6);
        }

        .dialog-body {
            margin-top: 30px;
            // max-height: 643px;
            overflow: hidden;
            overflow-y: auto;
            max-height: 66vh;
            min-height: 20px;

            &::-webkit-scrollbar {
                display: none;
            }

            .detail-row {
                // display: flex;
                // flex-wrap: wrap;
            }

            .detail-prop {
                margin-bottom: 28px;

                .detail-prop-title {
                    display: flex;
                    align-items: center;
                    height: 40px;
                    padding-left: 54px;
                    font-size: 18px;
                    font-weight: 900;
                    background: url(~@/assets/svg/detail-prop-title-bg.svg);
                    background-repeat: no-repeat;
                    background-position: left center;
                    color: #ffffff;
                }

                .detail-prop-value {
                    margin-top: 6px;
                    padding: 6px 12px;
                    font-size: 16px;
                    font-weight: 500;
                    color: #ffffff;
                    // background: #213d6d;
                    background: rgba(33, 61, 109, 0.7);
                    line-height: 1.5;
                }

                .detail-prop-textnode {
                    font-size: 18px;
                    color: #ffffff;
                    line-height: 1.5;
                }

                .detail-prop-sub {
                    display: flex;
                    justify-content: space-between;

                    .detail-prop-sub__label {
                        font-weight: bold;
                    }

                    .detail-prop-sub__value {
                        max-width: 50%;

                        .detail-prop-pics {
                            padding-top: 0;
                        }
                    }
                }

                .detail-prop-pics {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    padding: 8px 0 5px;

                    .detail-prop-pics__item {
                        width: 120px;
                        height: 120px;
                        flex: 0 0 120px;
                        margin-right: 14px;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        cursor: pointer;
                        border-radius: 10px;
                        overflow: hidden;

                        &:last-child {
                            margin-right: 0;
                        }

                        &.signature {
                            background: #fff;
                        }
                    }
                }

                .empty-box {
                    padding-left: 19px;
                    font-size: 14px;
                }
            }

            .approval-flow-wrapper {
                padding-top: 30px;
                padding-bottom: 10px;
                border-top: 1px solid;
                border-image: linear-gradient(90deg,
                        rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0.4) 57.5%,
                        rgba(255, 255, 255, 0) 97%) 1;
            }
        }
    }
}

.modalWraps {

    .dialog-title,
    .dialog-subtitle,
    .detail-prop-textnode,
    .flow-item-title,
    .flow-item-username,
    .flow-item-remark,
    .send-copy-title,
    .flow-item-title,
    .name {
        color: #000000 !important;
    }

    .approval-flow-item-tail {
        border-left: 2px solid #035dff77 !important;
    }

    .ant-modal-body {
        background-color: #ffffff;
    }
}
</style>